<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2016/4/19
  Time: 11:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/view/common/jsp_top.jsp" %>
<div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <%-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>--%>
            <a class="navbar-brand" href="index.html">陌与尘埃管理系统</a>
        </div>
        <!-- Top Menu Items -->
        <ul class="nav navbar-right top-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> <b
                        class="caret"></b></a>
                <ul class="dropdown-menu message-dropdown">
                    <li class="message-preview">
                        <a href="#">
                            <div class="media">
                                    <span class="pull-left">
                                        <img class="media-object" src="http://placehold.it/50x50" alt="">
                                    </span>
                                <div class="media-body">
                                    <h5 class="media-heading"><strong>管理员</strong>
                                    </h5>
                                    <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message-preview">
                        <a href="#">
                            <div class="media">
                                    <span class="pull-left">
                                        <img class="media-object" src="http://placehold.it/50x50" alt="">
                                    </span>
                                <div class="media-body">
                                    <h5 class="media-heading"><strong>John Smith</strong>
                                    </h5>
                                    <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message-preview">
                        <a href="#">
                            <div class="media">
                                    <span class="pull-left">
                                        <img class="media-object" src="http://placehold.it/50x50" alt="">
                                    </span>
                                <div class="media-body">
                                    <h5 class="media-heading"><strong>John Smith</strong>
                                    </h5>
                                    <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="message-footer">
                        <a href="#">Read All New Messages</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i> <b
                        class="caret"></b></a>
                <ul class="dropdown-menu alert-dropdown">
                    <li>
                        <a href="#">Alert Name <span class="label label-default">Alert Badge</span></a>
                    </li>
                    <li>
                        <a href="#">Alert Name <span class="label label-primary">Alert Badge</span></a>
                    </li>
                    <li>
                        <a href="#">Alert Name <span class="label label-success">Alert Badge</span></a>
                    </li>
                    <li>
                        <a href="#">Alert Name <span class="label label-info">Alert Badge</span></a>
                    </li>
                    <li>
                        <a href="#">Alert Name <span class="label label-warning">Alert Badge</span></a>
                    </li>
                    <li>
                        <a href="#">Alert Name <span class="label label-danger">Alert Badge</span></a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">View All</a>
                    </li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> 管理员 <b
                        class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li>
                        <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-fw fa-envelope"></i> Inbox</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
                    </li>
                </ul>
            </li>
        </ul>
        <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
       <%-- <div class=" collapse navbar-collapse navbar-ex1-collapse">
            <ul id="treeDemo" class="nav navbar-nav side-nav ztree"></ul>
        </div>--%>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav side-nav ztree" id="menu"></ul>
        </div>
        <!-- /.navbar-collapse -->
    </nav>

    <div id="page-wrapper" style="min-height: 1000px">
        <ul class="nav nav-tabs" id="myTab">
            <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="home">welcome</div>
        </div>
       <%-- <script>
            j(document).ready(function () {
                j("#menu li a").click(function () {
                    var _title = j(this).text();
                    var _menuID = j(this).attr("id");
                    var _path = j(this).attr("path");
                    var _isNewTab = true;
                    //判断是否已有该tab，如果已有，则激活
                    j("#myTab li").each(function (i) {
                        var _originalId = j(this).find("a").attr("href");
                        if ((_originalId) == ("#" + _menuID)) {
                            _isNewTab = false;
                        }
                    });
                    if (_isNewTab) {
                        var _tabHTML = "<li id='tab_" + _menuID + "'><a href='#panel_" + _menuID + "' data-toggle='tab'>" + _title + "</a></li>";
                        j("#myTab li:last").after(_tabHTML);

                        var _panelHTML = "<div class='tab-pane' id='panel_" + _menuID + "'><iframe scrolling='auto' frameborder='0' style='width: 100%;height: 100%;' src='" + _path + "'></iframe></div>";
                        j(".tab-content div:last").after(_panelHTML);
                    }

                    j("#tab_" + _menuID).siblings().removeClass("active");
                    j("#tab_" + _menuID).addClass("active");
                    j("#panel_" + _menuID).siblings().removeClass("active");
                    j("#panel_" + _menuID).addClass("active");
                    j("#panel_" + _menuID).show();
                });

                //TAB选项卡切换
                j("#myTab li a").click(function (e) {
                    e.preventDefault();//阻止a标签跳转
                    j(this).tab('show');
                })
            })
        </script>--%>
    </div>
    <!-- /#page-wrapper -->

</div>
<script>
    var ztree;
    j(document).ready(function () {
        _loadMenu();
    })
    function _loadMenu() {

        var setting = {
            isSimpleData : true,              //数据是否采用简单 Array 格式，默认false
            treeNodeKey : "id",               //在isSimpleData格式下，当前节点id属性
            treeNodeParentKey : "pid",        //在isSimpleData格式下，当前节点的父节点id属性
            //check: {
            //    enable: true
            //},
            view: {
              //  fontCss: getFontCss,
                dblClickExpand: false,
                showLine: true
            },
            data: {
                key: {
                    title: "t"
                },
                simpleData: {
                    enable: true
                    //checked: true
                }
            },
            callback: {
                onClick: _onClick
            }
        };
        //请求树状数据，初始化树
//      var zNodes =[ { id:1, pId:0, name:"父节点1 - 展开", open:true}, { id:11, pId:1, name:"父节点11 - 折叠"}];
        //返回的数据格式,如上，注意一点自己拼接字符串返回的会有问题
        var ztreeNodes;
        j.ajax({
            async : false,
            cache:false,
            type: 'Get',
            url: 'menu/load',
            dataType: "json", //可以是text，如果用text，返回的结果为字符串；如果需要json格式的，可是设置为json
            success: function (data) {
                ztreeNodes = eval( "["+data+"]" ); //将string类型转换成json对象
                j.fn.zTree.init(j("#menu"), setting, ztreeNodes);
                ztree = j.fn.zTree.getZTreeObj("menu" );
            },
            error: function (msg) {
                alert(" 数据加载失败！" + msg);
            }
        });

        function _onClick(event,treeId,treeNode){
            if(treeNode.children){
                expandNode(treeNode);
            }else {
                _addTab(treeNode);
            }
        }

        //展开分类
        function expandNode(pNode){
            ztree.expandNode(pNode)
        }

        function _addTab(treeNode){
            var _title = treeNode.name;
            var _menuID = treeNode.id;
            var _path = treeNode.path;
            var _isNewTab = true;
            //判断是否已有该tab，如果已有，则激活
            j("#myTab li").each(function (i) {
                var _originalId = j(this).attr("id");
                console.log("o:"+_originalId);
                if ((_originalId) == ("tab_" + _menuID)) {
                    _isNewTab = false;
                }
            });
            if (_isNewTab) {
                var _tabHTML = "<li id='tab_" + _menuID + "'><a href='#panel_" + _menuID + "' data-toggle='tab'>" + _title + "</a></li>";
                j("#myTab li:last").after(_tabHTML);

                var _panelHTML = "<div class='tab-pane' id='panel_" + _menuID + "'><iframe scrolling='auto' frameborder='0' style='width: 100%;height: 100%;' src='" + _path + "'></iframe></div>";
                j(".tab-content div:last").after(_panelHTML);
            }

            j("#tab_" + _menuID).siblings().removeClass("active");
            j("#tab_" + _menuID).addClass("active");
            j("#panel_" + _menuID).siblings().removeClass("active");
            j("#panel_" + _menuID).addClass("active");
            j("#panel_" + _menuID).show();
        }

        //TAB选项卡切换
        j("#myTab li a").click(function (e) {
            e.preventDefault();//阻止a标签跳转
            j(this).tab('show');
        })
    }
</script>

<%@include file="/WEB-INF/view/common/jsp_bottom.jsp" %>